<template>
  <div class="city-content">
    
    <van-index-bar highlight-color="#ff9854" :index-list= "currentIndex" :sticky="false">
        <van-index-anchor  index="#" />
        <div class="list">
            <template v-for="item in curcity.hotCities" >
                <div class="hot-city" @click="clickCity(item)">
                    {{ item.cityName }}
                </div>
            </template>
        </div>

        <template v-for="item in curcity.cities">
            <van-index-anchor :index=item.group />
            <template v-for="li in item.cities">
                <van-cell :title="li.cityName" @click="clickCity(li)"/>
            </template>
        </template>
    </van-index-bar>
  </div>
</template>

<script setup>
    import { computed } from "vue"
    import  useCityStore from "@/stores/modules/city"
    import {useRouter} from "vue-router"
    const props= defineProps({
        curcity:{
            type : Object,
            default: () => ({cities:[]})
        }
    })
    const currentIndex = computed(() => {
        const list = props.curcity.cities.map(item => item.group)
        list.unshift("#")
        return list
    })

    const router = useRouter()
    const cityStore = useCityStore()
    function clickCity(city){
        cityStore.selectCity = city
        router.back()
    }

</script>

<style lang="less" scoped>
    .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 10px;
        padding-right: 25px;

        .hot-city {
            width: 70px;
            height: 28px;
            border-radius: 14px;
            font-size: 12px;
            color: #000;
            text-align: center;
            line-height: 28px;
            background-color: #fff4ec;
            margin: 6px 0;
        }
    }
</style>